import React, { useState, useEffect } from 'react';
import { Select, Button, Card } from 'antd';
import KnowledgeCard from '../../../../components/KnowledgeCard';
import './BlogList.css';
const articleData = [
  { category: '编程', title: '编程入门指南' },
  { category: '编程', title: '深入理解Java' },
  { category: '编程', title: 'JavaScript编程精解' },
  { category: '编程', title: 'Python从入门到精通' },
  { category: '编程', title: '软件工程实践' },
  { category: '密码学', title: '密码学基础' },
  { category: '密码学', title: '密码学与网络安全' },
  { category: '密码学', title: '现代密码学' },
  { category: '密码学', title: '实用密码技术' },
  { category: '密码学', title: '密码学与信息安全' },
  { category: '会计', title: '会计基础' },
  { category: '会计', title: '会计学教程' },
  { category: '会计', title: '财务会计' },
  { category: '会计', title: '管理会计' },
  { category: '会计', title: '会计信息系统' },
  { category: '其他', title: '人工智能简介' },
  { category: '其他', title: '数据结构与算法' },
  { category: '其他', title: '计算机网络' },
  { category: '其他', title: '操作系统原理' },
  { category: '其他', title: '数据库系统概念' },
];
const categories = ['编程', '密码学', '会计', '其他'];
const BlogList = () => {
  return (
    <div className='article-list'>
      {categories.map((category, index) => (
        <div
          key={index}
          className='category'>
          <h3>{category}</h3>
          <ul>
            {articleData
              .filter(article => article.category === category)
              .map((article, index) => (
                <li key={index}>{article.title}</li>
              ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default BlogList;
